<template>
	<view>
		<view class="nav" style="height:{{navBarHeight}}px;">
			<view class="nav-main">
				<view class="capsule-box"
					style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;">
					<view class="nav-title" style="text-align: center;">
						<image @click="goback" class="nav-back-icon" src="/static/icons/back.png"
							bind:tap="navToBackLastPage"></image>
						答题
					</view>
				</view>
			</view>
		</view>
		<view>
			<image src="/static/icons/answer_bg@3x.png" class="setbg"
				style="position: fixed;top: {{navBarHeight}}px;height: {{screenHeight-navBarHeight}}px;">>
			</image>
			<view class="poem">
				<view class="tips" v-if="restAnswerTimes < 1"
					style="position: fixed;top: {{(screenHeight/2-navBarHeight/2)/2}}px;">
					今日答题次数已用完，
					明日再来！
				</view>

				<view class="title" v-if="restAnswerTimes>0">
					{{problem.name}}
				</view>
				<radio-group name="radio" @change="getRadioVal" class="radio-group" v-if="restAnswerTimes>0">
					<view class="radio-item">
						<label>
							<radio :value="problem.optionA" color="#DF3426" /><text
								class="item">A.{{problem.optionA}}</text>
						</label>
					</view>
					<view class="radio-item">
						<label>
							<radio :value="problem.optionB" color="#DF3426" /><text
								class="item">B.{{problem.optionB}}</text>
						</label>
					</view>
					<view class="radio-item">
						<label>
							<radio :value="problem.optionC" color="#DF3426" /><text
								class="item">C.{{problem.optionC}}</text>
						</label>
					</view>
					<view class="radio-item">
						<label>
							<radio :value="problem.optionD" color="#DF3426" /><text
								class="item">D.{{problem.optionD}}</text>
						</label>
					</view>
				</radio-group>

				<view class="submit-btn" @click="submitAnswer(problem.answer,problem._id)" v-if="restAnswerTimes>0">
					提交答案(<text class="seconds">{{timeCount}}s</text>)
				</view>


				<view class="chance-times">
					您今天还有 <text class="num">{{restAnswerTimes}}</text>次答题赢红包机会
				</view>
			</view>

			<view class="mask-hongbao" v-if="showTrueMask">
				<image src="/static/icons/answer_yes_tips.png" class="hongbao"></image>
				<text class="hongbao-num">{{hbNum}}元</text>
				<view class="close" @click="closeHongbaoMask">
					关闭
				</view>
			</view>
			<view class="mask-hongbao" v-if="showWrongMask">
				<image src="/static/icons/answer_wrong_tips.png" class="hongbao"></image>
				<view class="close" @click="closeHongbaoMask">
					关闭
				</view>
			</view>

			<view class="mask-cry" v-if="showMissMask">
				<view class="container">
					<image src="/static/icons/cry.png" class="cry"></image>
					<view class="close">
						你已超时，继续下一题
					</view>

				</view>
				<view class="btns">
					<view class="back" @click="backTo">
						返回
					</view>
					<view class="next" @click="toNext">
						下一题
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showTrueMask: false,
				showWrongMask: false,
				showMissMask: false, // 倒计时结束，没有答题
				restAnswerTimes: 0, // 剩余答题机会
				problem: {},
				subAnswer: '',
				hbNum: 0,
				isChecked: false,
				timeCount: 20, // 页面倒计时
				time: 3,
				timerId: '',
				navBarHeight: 0, // 导航栏高度
				menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				screenHeight: 0, // 屏幕高度
				tmId: '' // 上题的题目id
			};
		},
		onLoad() {
			// clearInterval(this.timerId)
			//获取胶囊按钮的数据
			const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
			console.log(wx.getSystemInfoSync().screenHeight)
			this.screenHeight = wx.getSystemInfoSync().screenHeight
			this.setNavBarInfo()

			uni.setStorageSync('page', 'Qa')
			this.getProblem()
			// if (this.restAnswerTimes > 0) {
			// 	this.countDown()
			// }

			uni.setStorage({
				key: 'launchFlag',
				data: true
			});

		},
		onUnload() {
			clearInterval(this.timerId)
		},

		methods: {
			// 返回
			backTo(){
				let fromPage=uni.getStorageSync('fromPage')
				if(fromPage==='guide'){
					uni.reLaunch({
						url: '/pages/guide/guide'
					})
				}else {
					uni.switchTab({
						url: '/pages/culture/culture'
					})
				}
			},
			goback() {
				let fromPage = uni.getStorageSync('fromPage')
				if (fromPage == 'guide') {
					uni.reLaunch({
						url: '/pages/guide/guide'
					})
				} else {
					uni.switchTab({
						url: '/pages/culture/culture'
					})
				}

			},
			/**
			 * @description 设置导航栏信息
			 */
			setNavBarInfo() {
				// 获取系统信息
				const systemInfo = wx.getSystemInfoSync();
				// 胶囊按钮位置信息
				const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
				// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
				this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo
					.height + systemInfo.statusBarHeight;
				this.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
				this.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
				this.menuHeight = menuButtonInfo.height;
			},

			// 倒计时
			countDown() {
				this.timerId = setInterval(async () => {
					if (this.timeCount > 0) {
						this.timeCount--
					} else {
						clearInterval(this.timerId)
						// 时间到，默认回答错，到下一题
						this.showMissMask = true

						// 获取新题
						const {
							data: res
						} = await uni.$http.post('/problem/getProblem', {
							userId: this.userInfo._id
						})

						// 减少答题次数
						uni.$http.post('/problem/submitProblemReduce', {
							"userId": this.userInfo._id,
							"problemId": this.problem._id
						})
						// 获取最新的剩余次数
						// console.log(res.data)
						this.restAnswerTimes = res.data.num
						return
					}
				}, 1000)

			},

			getRadioVal(e) {
				if (e.detail.value != '') {
					this.subAnswer = e.detail.value.trim()
				} else {
					this.subAnswer = ''
				}
			},
			// 随机获得一道题目 
			async getProblem(id) {
				const {
					data: res
				} = await uni.$http.post('/problem/getProblem', {
					userId: this.userInfo._id,
					id: this.problem._id
				})
				console.log(res.data)
				this.problem = res.data.problem
				this.tmId = res.data.problem._id

				this.restAnswerTimes = res.data.num
				if (this.restAnswerTimes > 0) {
					this.countDown()
				}

			},
			// 提交答案
			async submitAnswer(answer, id) {
				if (this.subAnswer != '') {
					clearInterval(this.timerId)
					// 还有答题机会的情况
					if (this.restAnswerTimes > 0) {
						// 回答正确:提交答案，获得红包
						if (this.subAnswer == answer.trim()) {
							const {
								data: res
							} = await uni.$http.post('/problem/submitProblem', {
								"userId": this.userInfo._id,
								"problemId": id
							})
							if (res.success == '0') {
								this.showTrueMask = true
								this.hbNum = res.data
								this.getProblem(id)
							}

						} else {
							console.log('3')
							// 答错显示答题错误
							this.showWrongMask = true

							// 减少答题次数
							uni.$http.post('/problem/submitProblemReduce', {
								"userId": this.userInfo._id,
								"problemId": id
							})
							const {
								data: res
							} = await uni.$http.post('/problem/getProblem', {
								userId: this.userInfo._id
							})
							// console.log(res.data)
							this.restAnswerTimes = res.data.num
						}
					} else {
						uni.$showMsg('今日答题机会已用完!')
						uni.redirectTo({
							url: '/subpkg/Qa/Qa'
						})
					}
				} else {
					uni.$showMsg('未选择答案')
				}
			},

			// 下一题
			async toNext() {
				this.showMissMask = false
				this.timeCount = 20
				// 减少答题次数
				// uni.$http.post('/problem/submitProblemReduce', {
				// 	"userId": this.userInfo._id,
				// 	"problemId": this.problem._id
				// })

				const {
					data: res
				} = await uni.$http.post('/problem/getProblem', {
					userId: this.userInfo._id,
					id: this.tmId
				})
				console.log(res.data)
				this.problem = res.data.problem
				this.tmId = res.data.problem._id
				this.restAnswerTimes = res.data.num

				if (this.restAnswerTimes > 0) {
					this.countDown()
				}

			},
			closeHongbaoMask() {
				// 回答正确：下一题，刷新页面达到更新单选按钮默认选中问题
				// this.getProblem()
				uni.reLaunch({
					url: '/subpkg/Qa/Qa'
				})

				this.showWrongMask = false
				this.showTrueMask = false

			}
		},
		computed: {
			...mapState('m_user', ['userInfo'])
		}
	}
</script>

<style lang="scss">
	.cry {
		width: 113rpx;
		height: 113rpx;
	}

	.nav-title {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;

		.back {
			position: absolute;
			left: 20rpx;
			color: #333;
			font-size: 28rpx;
		}
	}

	.setbg {
		width: 100%;
		height: 100%;
		position: fixed;
	}

	.poem {
		height: 600rpx;
		width: 500rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;

		.title {
			font-size: 36rpx;
			font-weight: 500;
			color: #444444;
			z-index: 999;
			line-height: 45rpx;
			margin-top: 80rpx;

		}
	}

	.radio-group {
		padding-top: 40rpx;
		box-sizing: border-box;
	}

	.radio-item {
		height: 80rpx;
		line-height: 80rpx;

		.item {
			margin-left: 20rpx;
		}
	}

	.submit-btn {
		width: 323rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background: #FFBA25;
		border-radius: 12rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: auto;
		margin-top: 20rpx;

		.seconds {
			color: #DA0909;
		}
	}

	.chance-times {
		font-size: 28rpx;
		font-weight: 500;
		color: #444444;
		position: absolute;
		bottom: -42%;
		right: 0;

		.num {
			font-size: 36rpx;
			font-weight: 500;
			color: #DF3426;
		}
	}

	.mask-cry {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .6);
		z-index: 9999;
		position: fixed;

		.btns {
			position: fixed;
			bottom: 16vh;
			display: flex;
			justify-content: space-between;
			left: 50%;
			transform: translateX(-50%);
		}

		.back {
			width: 223rpx;
			height: 80rpx;
			background: #FFBA25;
			border: 1rpx solid #FFBA25;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
			margin-right: 20rpx;
		}

		.next {
			width: 223rpx;
			height: 80rpx;
			background: #FFBA25;
			border: 1rpx solid #FFBA25;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}

		.container {
			position: fixed;
			width: 580rpx;
			height: 353rpx;
			background: #FFFFFF;
			border-radius: 26rpx;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			.close {
				margin-top: 50rpx;
			}
		}
	}

	.mask-hongbao {
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, .6);
		z-index: 9999;
		position: fixed;

		.hongbao-num {
			font-size: 72rpx;
			font-family: Adobe Heiti Std;
			font-weight: bold;
			color: #C83A23;
			line-height: 123rpx;
			text-shadow: 1rpx 2rpx 4rpx rgba(102, 41, 23, 0.38);
			position: absolute;
			left: 50%;
			top: 47%;
			transform: translate(-50%, -50%);
		}

		.hongbao {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 631rpx;
			height: 715rpx;
		}

		.close {
			width: 323rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #FFBA25;
			border: 1rpx solid #FFBA25;
			border-radius: 12rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
			position: absolute;
			bottom: 13%;
			left: 50%;
			transform: translateX(-50%);
		}

	}

	.tips {
		font-size: 48rpx;
		font-weight: bold;
		color: #E05454;
		line-height: 89rpx;
		position: absolute;
		text-align: center;
		position: absolute;
		top: 40%;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		z-index: 9999;
	}

	.nav-main {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.nav .capsule-box {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
	}

	// components/navigation/index.wxss
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
	}

	.nav-main {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.nav .capsule-box {
		position: absolute;
		box-sizing: border-box;
		width: 100%;

		.nav-handle {
			display: flex;
		}
	}

	.nav-back-icon {
		position: absolute;
		left: 25rpx;
		width: 20rpx;
		height: 30rpx;
	}
</style>
